<template>
	<view class="pagess">
		<view style="height: 60px;overflow: hidden;margin-top: 10px;">
			<view  @click="xzcx(1)" :class="{'itv1':cur1==1}" class="mx">查询明细</view>
			<view  @click="xzcx(2)" :class="{'itv1':cur1==2}" class="mx">汇总查询</view>
		</view>
		
		<view style="height: 60px;overflow: hidden;margin-top: 10px;">
			<view class="rq1">选择时间: {{date1}} </view>
			<view  @click="onShowDatePicker('date')" class="rq">
				日期时间选择
			</view>
		</view>
		
		<view style="height: 60px;overflow: hidden;margin-top: 10px;">
			<view class="rq1">班次:{{bcname}}</view>
			<view  @click="addbc()" class="rq">
				选择班次
			</view>
		</view>
		
		
		<view v-show="cur1==1">
		<view class="iv1">
			<view class="iv2 ssio">委托单号</view>
			<view class="iv2 ssio">货主</view>
			<view class="iv2 ssio">货名</view>
			<view class="iv2 ssio">车号</view>
			<view class="iv2 ssio">净重</view>
		</view>
		<view style="overflow: auto;height: 480px;width: 100%;margin-bottom: 100px;">
			<view  v-for="(item, index) in list"   class="iv3 syy">
				<view>委托单号：{{item.char11}}</view>
				<view>货主：{{item.char4}}</view>
				<view>货名：{{item.char2}}</view>
				<view>车号：{{item.char1}}</view>
				<view>净重：{{item.num3}}</view>
			</view>
		</view>

		
		<view v-show="opentype" class="ck">
			<view style="padding: 10px;margin-bottom: 10px; background-color: #3c77b7;overflow: hidden;">
				<view style="float: right;padding: 3px;font-size: 15px;color: #ffffff;font-weight: 600;"
					@click="opentypeqx">关闭</view>
			</view>
			<view style="padding: 10px;" class="iss">
				<view>委托单号：{{openinfo.orderons}}</view>
				<view>货主：{{openinfo.hzdwid}}</view>
				<view>货名：{{openinfo.hname}}</view>
				<view>授权时间：{{openinfo.sqstartime}}-{{openinfo.sqendtime}}</view>
				<view>预约车辆：{{openinfo.cp}}</view>
				<view>净重：{{ openinfo.jz}}</view>
			</view>
		</view>
		
		</view>
		
		<view v-show="cur1==2">
		<view class="iv1">
			<view class="iv2 ssio">委托单号</view>
			<view class="iv2 ssio">货主</view>
			<view class="iv2 ssio">货名</view>
			<view class="iv2 ssio">净重</view>
			<view class="iv2 ssio">车次</view>
		</view>
		<view style="overflow: auto;height: 480px;width: 100%;margin-bottom: 100px;">
		<view  v-for="(item, index) in list2"    class="iv3 syy">
			<view>委托单号：{{item.char11}}</view>
			<view>货主：{{item.char4}}</view>
			<view>货名：{{item.char2}}</view>
			<view>净重：{{item.jzsum}}</view>
			<view>车次：{{item.carnum}}</view>
		</view>
		</view>
		<view v-show="opentype2" class="ck">
			<view style="padding: 10px;margin-bottom: 10px; background-color: #3c77b7;overflow: hidden;">
				<view style="float: right;padding: 3px;font-size: 15px;color: #ffffff;font-weight: 600;"
					@click="opentypeqx2">关闭</view>
			</view>
			<view style="padding: 10px;" class="iss">
				<view>委托单号：{{openinfo2.orderons}}</view>
				<view>货主：{{openinfo2.hzdwid}}</view>
				<view>货名：{{openinfo2.hname}}</view>
				<view>授权时间：{{openinfo2.sqstartime}}-{{openinfo2.sqendtime}}</view>
				<view>车号：{{openinfo2.cp}}</view>
				<view>车次：{{ openinfo2.carnum}}</view>
			</view>
			
		</view>
		</view>
		
		
		
		<view  v-show="banci" class="ck" style="border: 1px solid #3c77b7;">
			<view class="item3s">班次选择</view>
			<view style="overflow: auto;height: 300px;">
					<view class="item6s" @click="addcpxz(item)" :class="{'itv1':cur2==item.id}"  v-for="(item, index) in bancilist" :key="item.id">
							{{item.name1}}-{{item.name2}}
					</view>
			</view>
			
			<view @click="qrcp" class="cz">确认选择</view>
			<view @click="gbcp" class="gb">关闭</view>
		</view>
		
		<u-calendar :show="showPicker" mode="single" minDate="2023-01-01" :maxCount="1" @confirm="confirm" @close="closes"></u-calendar>
		
	<!-- 		<uni-calendar  class="ck"
				 :insert="showPicker"
				 :lunar="true" 
				 :clearDate="true"
				 :range="false"
				 :start-date="date"
				 :end-date="'2025-12-30'"
				 @change="change"
			/> -->
	
		
		
		<tabBar  :pagePath="'/pages/sjcx/lhysjcx'"></tabBar>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		data() {
			return {
				uinfo: '',
				date: new Date().toISOString().slice(0, 10),
				date1:new Date().toISOString().slice(0, 10),
				type: 'rangetime',
				value: '',
				showPicker: false,
				list:[],
				cur1:1,
				bcid:'',
				list2:[],
				banci:false,
				bancilist:[],
				cur2:'',
				opentype:false,
				openinfo:'',
				opentype2:false,
				openinfo2:'',
				bcname:'',
				bcid:'',
			}
		},
		async onLoad() {
			this.getuserinfo();
		
			this.getbancitimedqs();
			this.getbanciall();
			this.getlhyseach();
			this.getlhyseachall();
		},
		methods: {
			closes(){
				this.showPicker = false
			},
			confirm(e){
				let cur1 = this.cur1
				console.log(e)
				console.log(e.length)
				this.date = e[0]
				this.date1 = e[0]
				if(cur1==1){
					this.getlhyseach();
				}
				if(cur1==2){
					this.getlhyseachall();
				}
				this.showPicker = false
			},
			
			addbc(){
				this.banci = true
			},
	
			opentypeqx2(){
				this.opentype2 = false
			},
			opens2(e){
				this.opentype2 = true
				this.openinfo2 = e
			},
			opentypeqx(){
				this.opentype = false
			},
			opens(e){
				this.opentype = true
				this.openinfo = e
			},
			qrcp(){
				this.banci = false
				this.getlhyseach();
			},
			gbcp(){
				this.banci = false
			},
			addcpxz(e){
				this.cur2 = e.id
				this.bcid = e.id
				this.bcname = e.name1+'-'+e.name2
			},
			xzcx(e){
				if(e==1){
					this.getlhyseach();
				}
				if(e==2){
					this.getlhyseachall();
				}
				this.cur1 = e
			},
			async getbancitimedqs(){
				let res = await this.$api.getbancitimedqs()
				this.cur2 = res.data.id
				this.bcname = res.data.name1+'-'+res.data.name2
				this.bcid =res.data.id
			},
			async getbanciall(){
				let res = await this.$api.getbanciall()
				if (res.data.code == 0) {
					this.bancilist = res.data.data
					
				}	
			},
			
			async getlhyseachall(){
				let data = {
					id: uni.getStorageSync('uid'),
					date:this.date1,
					bcid:this.bcid
				}
				let res = await this.$api.getlhyseachall(data)
				if (res.data.code == 0) {
					this.list2 = res.data.data
				}
			},
			async getlhyseach(){
				let data = {
					id: uni.getStorageSync('uid'),
					date:this.date1,
					bcid:this.bcid
				}
				let res = await this.$api.getlhyseach(data)
				if (res.data.code == 0) {
					this.list = res.data.data
				}
			},
			//获取当前理货员理货的数据
			onShowDatePicker(){//显示
					// this.date =  new Date().toISOString().slice(0, 10)
					this.showPicker = true;
				},
		
			async getuserinfo() {
				let data = {
					id: uni.getStorageSync('uid')
				}
				let res = await this.$api.getuserinfo(data)
				console.log(res.data.code)
				if (res.data.code == 0) {
					this.uinfo = res.data.data
				}
			},
		},
		components: {
			uniCalendar
		}
	}
</script>

<style>
	.iv1{
		border: 1px solid #3c77b7;
		height: 50px;
		line-height: 50px;
		text-align: center;
		margin-top: 20px;
	}
	.iv2{
		border: 1px solid #3c77b7;
		height: 50px;
		line-height: 50px;
		text-align: center;
		width: 20%;
		float: left;
		font-size: 20px;
		overflow: hidden;
	}
	.iv3{
		border: 1px solid #3c77b7;
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
	.itv1{
		background-color: #3c77b7;
		color: #ffffff;
	}
	.item6s{
		border: 3px solid #3c77b7;
		height: 50px;
		width: 46%;
		margin-left: 5px;
		font-size: 20px;
		text-align: center;
		line-height: 50px;
		float: left;
		border-radius: 10px;
		margin-top: 10px;
	}
	.cz{
		background-color: #3c77b7;
		font-size: 20px;
		font-weight: 600;
		color: #ffffff;
		text-align: center;
		line-height: 40px;
		height: 40px;
	}
	.gb{
		background-color: red;
		font-size: 20px;
		font-weight: 600;
		color: #ffffff;
		text-align: center;
		line-height: 40px;
		height: 40px;
	}
	.item3s{
		background-color: #3c77b7;
		color: #ffffff;
		font-size: 20px;
		font-weight: 600;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}
	.ck{
		z-index:999;
		-moz-opacity:1;
		opacity: 1;
		position: fixed;
		background-color: #ffffff;
		width: 90%;
		border-radius: 5px;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.iss view{
		font-size: 20px;
		height: 30px;
		line-height: 30px;
	}
	.ssio{
		background-color: #3c77b7;
		color: #ffffff;
		font-size: 18px;
	}
	.syy{
		height: 160px;
		width: 96%;
		margin:  0 auto;
		margin-top: 10px;
		box-shadow: 5px 5px 5px #888888;
	}
	.syy view{
		font-size: 18px;
		height: 30px;
		line-height: 30px;
		text-align: left;
		padding-left: 10px;
	}
	.mx{
		border: 1px solid #3c77b7;
		height: 40px;
		line-height: 40px;
		float: left;
		text-align: center;
		font-size: 16px;
		border-radius: 10px;
		width: 46%;
		margin-left: 10px;
	}
	.rq{
		height: 40px;
		line-height: 40px;
		text-align: center;
		width: 30%;float: left;
		font-size: 16px;
		border-radius: 10px;
		margin-left: 20px;
		background-color: #3c77b7;
		color: #ffffff;
	}
	.rq1{
		height: 40px;
		line-height: 40px;
		text-align: center;
		width: 60%;
		float: left;
		font-size: 16px;
	}
</style>
